<template>
    <basic-layout title="反馈意见" :showAddBtn="false" class="wrapBox">
        <van-form ref="form" label-width="4.1em">
            <van-field v-model="formData.adviseContent" clearable required
                label="反馈内容" name="内容" placeholder="请写下您的意见" 
                :error="false" :rules="ruleForm.yj" show-word-limit
                type="textarea" rows="1" autosize  maxlength="200" />
            <van-field v-model="formData.telephone" clearable required
                label="联系电话" name="电话" placeholder="收获人手机号"
                :error="false" :rules="ruleForm.tel"  maxlength="11"
            />
            <div class="imgBox">
                <span>图片(选填,提供问题截图)</span>
                <van-field name="uploader">
                    <template #input>    
                        <uploadCom ref="uploadRef" :maxNumber="6" @uploadFileIds="uploadFileIds"
                        accept=".jpg,.jpeg,.png" :defaultFiles="defaultFiles"></uploadCom>
                        <!-- <van-uploader :accept="accept" :before-read="uploadBefore"
                        :before-delete="onDel"
                         v-model="fileList" :max-count="6" /> -->
                    </template>
                </van-field>
            </div>
        </van-form>
        
        <div class="btnBox">
            <van-button round type="info" block @click="onSubmit">提交</van-button>
        </div>
    </basic-layout>
</template>

<script>
    import { uploadAttach } from '@/api/common';
    import { addFeedback } from '@api/platframe/mainFrame/mine';
    
    export default {
        props: {

        },
        components: {

        },
        data () {
            return {
                accept: ".png,.jpg,.jpeg",
                maxSize: 51200, // 文件最大：50M
                defaultFiles:[],
                formData: {
                    adviseContent: "",// 投诉建议内容
                    telephone: "",// 投诉建议人电话
                    fileCode: [],// 文件
                    staffId: "",// 投诉建议人标识
                    adviseTime: "",// 投诉建议时间
                },
                // 必填项校验
                ruleForm: {
                    yj: [
                        { required: true, message: "请写下您的意见", trigger: "onBlur" },
                    ],
                    tel: [
                        { required: true, message: "请填写收获人手机号", trigger: "onBlur" },
                        {
                            pattern: this.$commonReg.phoneReg,
                            message: this.$commonReg.phoneMsg,
                            trigger: "onBlur",
                        },
                    ],
                },
            };
        },
        created () {
            this.formData.staffId = sessionStorage.getItem("userid");
        },
        computed: {

        },
        mounted () {
            const dates = new Date();
            let yy = dates.getFullYear();
            let mm = '';
            if (dates.getMonth()<9) {
                mm = '0' + (dates.getMonth() + 1)
            } else {
                mm = dates.getMonth() + 1
            }
            let dd = dates.getDate();
            this.formData.adviseTime = yy + '-' + mm + '-' + dd;
        },
        watch: {

        },
        methods: {
            // 附件上传
            uploadFileIds (arr) {
                this.formData.fileCode = arr;
            },
            // 附件上传之前（进行附件大小、类型验证）
            // uploadBefore (file) {
            //     // console.log(Boolean(file.length));
            //     let format = this.accept.replace(/\./g, '').split(",");
            //     if ((file.size / 1000) > this.maxSize) {
            //         this.$Notify({ type: "warning", message: `文件大小不能超过${(this.maxSize / 1024)}M!` });
            //         return false;
            //     } else if (!format.includes((file.name.split('.')[file.name.split('.').length - 1]).toLowerCase())) {
            //         this.$Notify({ type: "warning", message: '文件格式有误,请上传' + format.join('、') + '格式文件！' });
            //         return false;
            //     }
            //     uploadAttach(file).then(res => {
            //         if (res.code === 1000 && res.data) {
            //             this.fileList.push({ url:res.data.url });
            //             this.formData.fileCode.push(res.data.fileCode);
            //         }
            //     })
            // },
            // 文件删除前的
            // onDel (file,obj) {
            //     this.fileList.splice(obj.index,1);
            //     this.formData.fileCode.splice(obj.index,1);
            // },
            // 提交
            onSubmit() {
                // 全局表单验证
                this.$refs.form.validate().then( async () => {
                    let obj = { ...this.formData }
                    let res = await addFeedback(obj);
                    console.log(res);
                    if (res.code === 1000) {
                        this.$Notify({ type: "success", message: "提交成功！" });
                        this.$router.go(-1);
                    }
                }).catch(() => {
                    // this.$toast.fail('请完成必填项！')
                })
            },
        }
    };
</script>

<style scoped lang="less">
.wrapBox ::v-deep .content{
    position: relative;
    padding: 12px;
    background-color: #F4F7FA;
    .van-form {
        margin: 10px 0 20px;
        &>div {
            margin: 10px 0;
            border-radius: 10px;
        }
        .imgBox {
            background-color: #fff;
            &>span {
                display: inline-block;
                margin: 10px 0 0 16px;
            }
        }
    }
    // .btnBox{
    //     width: calc(100% - 24px);
    //     position: absolute;
    //     bottom: 20px;
    // }
}
</style>